import { Breadcrumb, Button, Table, TableProps } from 'antd';
import React, { FC } from 'react';
import { FormPanel, ExtendReader, type FormPanelObject, InputType, FormPanelBtnAlign } from 'lfun-bg-comp';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import _ from 'lodash';
import { PageContainer } from '@/component/page-container';
import { GENDER, YES_NO } from '@/constant/basicOptions';
import { HIGHEST_EDUCATION, RETIRE_TYPE } from '@/constant/teachOptions';
import { POLITICAL_STATUS } from '@/constant/studentOptions';
import { PAGINATIONCONFIG } from '@/constant/page';
import { getPathRoot, get_stoge_pz, set_stoge_pz } from '@/utils';
import { listRetire } from '@/service/teacher/retire';
import PermissionButton, { isPermissionOperate } from '@/component/permission-button';

const Groups: FC = () => {
  const [loading, setLoading] = React.useState(false);
  const [data, setData] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(get_stoge_pz());
  const [pageIndex, setPageIndex] = React.useState(1);
  const [form, setForm] = React.useState(null);

  const navigate = useNavigate();

  const searchTemplate = [
    {
      title: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      inputs: [
        {
          label: '姓名',
          name: 'teacher_name',
          key: 'teacher_name',
        },
        {
          label: '性别',
          name: 'teacher_gender',
          key: 'teacher_gender',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '身份证号码',
          name: 'teacher_id_number',
          key: 'teacher_id_number',
        },
        {
          label: '最高学历',
          name: 'highest_education',
          key: 'highest_education',
          inputType: InputType.cascader,
          renderOption: HIGHEST_EDUCATION,
          formatSubmitValue: (value, formPanelObject: FormPanelObject) => {
            if (_.isArray(value)) return value.join(',');
            return value;
          },
        },
        {
          label: '政治面貌',
          name: 'political_status',
          key: 'political_status',
          inputType: InputType.select,
          renderOption: POLITICAL_STATUS,
        },
        {
          label: '是否在编',
          name: 'in_post',
          key: 'in_post',
          inputType: InputType.select,
          renderOption: YES_NO,
        },
        {
          label: '进本校年月',
          name: 'enter_school_time',
          key: 'enter_school_time',
          inputType: InputType.dateRange,
          formatSubmitValue: (value, formPanelObject: FormPanelObject) => {
            ExtendReader.formatSubmitValueByDateRange(value, formPanelObject, 'enter_school_time');
            return null;
          },
        },
        {
          label: '非在职时间',
          name: 'non_employment_time',
          key: 'non_employment_time',
          inputType: InputType.dateRange,
          formatSubmitValue: (value, formPanelObject: FormPanelObject) => {
            ExtendReader.formatSubmitValueByDateRange(value, formPanelObject, 'non_employment_time');
            return null;
          },
        },
      ],
    },
  ];
  const columns: TableProps['columns'] = [
    {
      title: '姓名',
      dataIndex: 'teacher_name',
      key: 'teacher_name',
    },
    {
      title: '性别',
      dataIndex: 'teacher_gender',
      key: 'teacher_gender',
      render: (text: string) => {
        return _.find(GENDER, { value: String(text) })?.label;
      },
    },
    {
      title: '身份证号码',
      dataIndex: 'teacher_id_number',
      key: 'teacher_id_number',
    },
    {
      title: '最高学历',
      dataIndex: 'highest_education',
      key: 'highest_education',
      render: (text: string) => {
        return _.find(HIGHEST_EDUCATION, { value: String(text) })?.label;
      },
    },
    {
      title: '政治面貌',
      dataIndex: 'political_status',
      key: 'political_status',
      render: (text: string) => {
        return _.find(POLITICAL_STATUS, { value: String(text) })?.label;
      },
    },
    {
      title: '是否在编',
      dataIndex: 'in_post',
      key: 'in_post',
      render: (text: boolean) => {
        return _.find(YES_NO, { value: text })?.label;
      },
    },
    {
      title: '进本校年月',
      dataIndex: 'enter_school_time',
      key: 'enter_school_time',
      render: (text: any) => {
        if (!text) return '';
        return dayjs(text).format('YYYY-MM-DD');
      },
    },
    {
      title: '非在职时间',
      dataIndex: 'retire_date',
      key: 'retire_date',
      render: (text: any) => {
        if (!text) return '';
        return dayjs(text).format('YYYY-MM-DD');
      },
    },
    {
      title: '离/退休证号',
      dataIndex: 'retire_number',
      key: 'retire_number',
    },
    {
      title: '状态',
      dataIndex: 'teacher_sub_status',
      key: 'teacher_sub_status',
      render: (text: any) => _.find(RETIRE_TYPE, { value: String(text) })?.label,
    },
    {
      title: '操作',
      dataIndex: 'op',
      key: 'op',
      fixed: 'right',
      //width: 150,
      align: 'center',
      hidden: !isPermissionOperate(),
      render: (text, record) => {
        return (
          <PermissionButton permission="view">
            <Button type="link" onClick={() => navigate(`${getPathRoot()}/nonemployed/details/${record.teacher_id}`)}>
              查看
            </Button>
          </PermissionButton>
        );
      },
    },
  ];
  const fetchData = async params => {
    setLoading(true);
    const res = await listRetire(params);
    if (res.success) {
      setData(res.data.items);
      setTotal(res.data.total);
      setPageSize(res.data.per_page);
      setPageIndex(res.data.page);
    }
    setLoading(false);
  };
  const pageChange = (page, per_page) => {
    set_stoge_pz(per_page);
    fetchData({ ...form?.getFieldsValue(), page, per_page });
  };
  React.useEffect(() => {
    fetchData({ page: pageIndex, per_page: pageSize });
  }, []);
  return (
    <PageContainer header={<Breadcrumb items={[{ title: '离退休信息管理' }]} />}>
      <FormPanel
        btnsAlign={FormPanelBtnAlign.right}
        restBtnText="重置"
        submitBtnText="查询"
        onLoad={(form: FormPanelObject) => setForm(form)}
        onFinish={(form: FormPanelObject) => {
          const params = form.getFieldsValue();
          fetchData({ ...params, page: 1, per_page: pageSize });
          return false;
        }}
        onReset={() => {
          fetchData({ page: 1, per_page: pageSize });
          form.resetFields();
        }}
        template={searchTemplate}
      />
      <Table
        loading={loading}
        dataSource={data}
        columns={columns}
        scroll={{ x: 'max-content' }}
        pagination={{ ...PAGINATIONCONFIG, total, pageSize, current: pageIndex, onChange: pageChange }}
      />
    </PageContainer>
  );
};
export default Groups;
